/*
 * @Author: yanjikun
 * @Date: 2022-04-24 11:16:38
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-09 13:59:23
 * @Description: file content
 */

import { computed, defineComponent, PropType, unref } from 'vue'
import { createFromIconfontCN } from '@ant-design/icons-vue'
import { isString } from '@/utils/is'
import { ICON_FONT_SCRIPT_URL } from '@/settings/onlineUrlSetting'
let scriptUrls = [...ICON_FONT_SCRIPT_URL]
let MyIconFont = createFromIconfontCN({
  scriptUrl: scriptUrls,
})
export default defineComponent({
  name: 'IconFont',
  props: {
    type: {
      type: String as PropType<string>,
      default: '',
      required: true,
    },
    prefix: {
      type: String as PropType<string>,
      default: 'custom-icon-',
    },
    color: {
      type: String as PropType<string>,
      default: 'unset',
    },
    size: {
      type: [Number, String] as PropType<number | string>,
      default: 14,
    },
    /** 阿里图库字体图标路径 */
    scriptUrl: {
      type: String as PropType<string | string[]>,
      default: '',
    },
  },
  setup(props, { attrs }) {
    if (props.scriptUrl) {
      scriptUrls = [...new Set(scriptUrls.concat(props.scriptUrl))]
      MyIconFont = createFromIconfontCN({
        scriptUrl: scriptUrls,
      })
    }
    const wrapStyleRef = computed(() => {
      const { color, size } = props
      const fontSize = isString(size) ? parseFloat(size) : size
      return {
        color,
        fontSize: `${fontSize}px`,
      }
    })
    return () => {
      const { type, prefix } = props
      return type ? (
        <MyIconFont
          type={type.startsWith(prefix) ? type : `${prefix}${type}`}
          {...attrs}
          style={unref(wrapStyleRef)}
        ></MyIconFont>
      ) : null
    }
  },
})
